<template>
    <div class="home">
        <header></header>
        <section>
            <div class="left">
                
                <li>
                    <!-- 视图导航 -->
                    <router-link to="/user">用户管理</router-link>
                </li>
                <li>
                    <!-- 视图导航 -->
                    <router-link to="/goods">商品管理</router-link>
                </li>
            </div>
            <div class="right">
                <router-view></router-view>
            </div>
        </section>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss">
.home {
    display: flex;
    flex-direction: column;
    &>header {
        height: 100px;
        background-color: red;
    }
    &>section {
        flex: 1;
        background-color: yellow;
        display: flex;
        flex-direction: row;
        .left {
            width: 20%;
            height: 100%;
            background-color: orange;
        }
        .right {
            flex: 1;
            background-color:pink;
        }
    }
}
</style>